<template>
  <el-scrollbar
    :max-height="props.configsJson.showBgImg ? 500 : 800"
    class="mt-[10px]"
  >
    <div
      class="sticky top-0 z-[10000] flex items-center justify-center select-none w-[96%] mb-[10px] mx-auto bg-[#454545] text-[#ccc] h-[33px] border border-solid border-[var(--border-color)] rounded-md"
    >
      <span>主题颜色</span><el-icon><Fries /></el-icon>
    </div>
    <div
      class="w-[95%] mx-[auto] cursor-pointer flex items-center relative h-[40px] rounded-lg mb-[10px] border-[2px] border-solid border-[var(--border-color)]"
      v-for="(item, index) in chartColors"
      :style="{
        borderColor: arraysAreEqual(selectedColor, item.color)
          ? item.color[0]
          : 'var(--border-color)',
      }"
      :key="index"
      @click="selecteColor(item)"
    >
      <span
        class="text-[#ccc] whitespace-nowrap inline-block w-[66px] text-center"
        >{{ "主题" + (index + 1) }}</span
      >
      <!-- {{ item.name }} -->
      <span
        class="inline-block w-[25px] h-[25px] rounded-md mr-[10px]"
        v-for="colorItem in fetchShowColors(item.color)"
        :key="colorItem"
        :style="{ backgroundColor: colorItem }"
      ></span>
      <div
        class="absolute left-0 bottom-0 h-[3px] w-[100%]"
        :style="{ backgroundImage: colorBackgroundImage(item.color) }"
      ></div>
    </div>
  </el-scrollbar>
</template>

<script setup lang="ts">
import { chartColors } from "@renderer/themes/index";
import { computed, ref } from "vue";
import { arraysAreEqual } from "@renderer/utils/other";
import { useThemeConfigStore } from "@renderer/store/modules/themeConfig";
import { useUserStore } from "@renderer/store/modules/user";
let userStore = useUserStore();
const themeConfigStore = useThemeConfigStore();

const props = defineProps({
  configsJson: {
    type: Object,
    default: () => ({}),
  },
});
let selectedColor = computed(() => {
  return themeConfigStore.currentThemeColor;
});
const selecteColor = (item: any) => {
  themeConfigStore.setCurrentThemeColor(item.color);
};
const colorBackgroundImage = (color) => {
  return `linear-gradient(to right, ${color[0]} 0%, ${color[5]} 100%)`;
};

// 获取用来展示的色号
const fetchShowColors = (colors: Array<string>) => {
  return cloneDeep(colors).splice(0, 6);
};

const cloneDeep = (obj) => {
  return JSON.parse(JSON.stringify(obj));
};
</script>

<style scoped lang="scss"></style>
